<template>
    <div class="table-view-style" ref="tableView" :style="{'height':mobile?'calc(100% - 20px)':'100%'}">
        <title-common style="margin-bottom: 10px" v-if="config.showTitle" :config="config"></title-common>
        <div ref="theadCommon" class="table-view-style-common">
            <div>
                <table class="rx-card-item-table"
                       :style="{'min-width':(50*columns.length + 50)+'px'}"
                       :class="{'rx-card-item-table-roll':stylesCommon.roll}">
                    <colgroup>
                        <col v-if="stylesCommon.serial" style="width: 50px;">
                        <col :style="{width: col.width +'px'}" v-for="(col,index) of columns" :key="index">

                    </colgroup>

                    <thead class="borderNome borderNome-thead" :class="{'table-view-roll-top':stylesCommon.roll}">
                    <tr class="thead-tr" :style="{'background':config.styles.stylesHead.headBgColor}">
                        <th v-if="stylesCommon.serial"
                            :style="getStyle(stylesCommon,1)">
                            {{ tableI18n('index', '序号') }}
                        </th>
                        <th :style="{...getStyle(stylesCommon,2),...StyleWidth(columns.length)}"
                            class="rx-card-item-table-flex"
                            v-for="(head,index) in columns" :key="index">
                            <div class="rx-card-item-table-common  rx-card-item-table-common-thead">{{ head.title }}
                            </div>
                        </th>
                    </tr>
                    <!--头部统计-->
                    <tr v-if="config.styles.advanced.location =='top'" class="borderNome thead-tr table-view-roll-tr"
                        :style="getStyle(stylesCommon,4,1)" :key="1">
                        <td v-if="stylesCommon.serial"
                            :style="getStyle(stylesCommon,5)">
                            <div style="width: 50px;">{{ tableI18n('statisticsTable', '统计') }}</div>
                        </td>
                        <td class="rx-card-item-table-flex table-common-1"
                            :style="{...getStyle(stylesCommon,5),...StyleWidth(columns.length)}"
                            v-for="(obj,index) in columns" :key="index">
                            <div class="rx-card-item-table-common"
                                 style="display: flex;align-items: center;"
                                 :style="{'justify-content':stylesCommon.listAligning}"
                                 v-if="totalList[obj.key] || totalList[obj.key]===0">
                                <rx-icon-show style="font-size: 23px" v-if="psIconfont(obj).iconfontShow"
                                         :style="{'color':psIconfont(obj).iconfontColor}" :icon="myIcon(obj)"></rx-icon-show>
                                <span>
								<span>{{ prefixion(obj) }}</span>{{
                                        formattedData(totalList[obj.key], obj)
                                    }}<span>{{ postfix(obj) }}</span>
							</span>
                            </div>
                        </td>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="rx-center">
                <div class="rx-table-center" ref="tbodyCommon" :style="getStyle(stylesCommon,3)"
                     :class="{'table-view-roll':stylesCommon.roll}">
                    <table class="rx-card-item-table"
                           :style="{'min-width':(50*columns.length + 50)+'px'}">
                        <colgroup>
                            <col v-if="stylesCommon.serial" style="width: 50px;">
                            <col :style="{width: col.width +'px'}" v-for="(col,index) of columns" :key="index">

                        </colgroup>
                        <tbody class="table-view-tbody ">
                        <tr class="borderNome thead-tr table-view-roll-tr" @click="tablePush(time)"
                            v-for="(time,index) in dataList" :key="index"
                            :style="getStyleCommon(stylesCommon,index,time)">
                            <td v-if="stylesCommon.serial"
                                :style="{...getStyleCommonTd(stylesCommon,time,obj),...StyleWidth(columns.length)}">
                                {{ index + 1 }}
                            </td>
                            <template v-for="(obj,index1) in columns">
                                <td class="rx-card-item-table-flex"
                                    :style="{...getStyleCommonTd(stylesCommon,time,obj),...StyleWidth(columns.length)}"
                                    :class="{'table-common-0':stylesCommon.listDiction==0,'table-common-1':stylesCommon.listDiction==1,'table-common-2':stylesCommon.listDiction==2}"
                                    v-if="(rowSpans[obj.key]?rowSpans[obj.key][index]:1)>0"
                                    :rowspan="rowSpans[obj.key]?rowSpans[obj.key][index]:1"
                                    :key="index1"
                                >
                                    <div class="rx-card-item-table-common">{{ time[obj.key] }}</div>
                                </td>
                            </template>
                        </tr>
                        </tbody>
                        <!--尾部统计-->
                        <tfoot v-if="config.styles.advanced.location =='bottom'">
                        <tr class="borderNome thead-tr table-view-roll-tr" :style="getStyle(stylesCommon,4,1)" :key="1">
                            <td v-if="stylesCommon.serial"
                                :style="getStyle(stylesCommon,5)">
                                <div style="width: 50px;">{{ tableI18n('statisticsTable', '统计') }}</div>
                            </td>
                            <td class="rx-card-item-table-flex table-common-1"
                                :style="{...getStyle(stylesCommon,5),...StyleWidth(columns.length)}"
                                v-for="(obj,index) in columns" :key="index">
                                <div class="rx-card-item-table-common"
                                     style="display: flex;align-items: center;"
                                     :style="{'justify-content':stylesCommon.listAligning}"
                                     v-if="totalList[obj.key] || totalList[obj.key]===0">
                                    <rx-icon-show style="font-size: 23px" v-if="psIconfont(obj).iconfontShow"
                                                  :style="{'color':psIconfont(obj).iconfontColor}" :icon="myIcon(obj)"></rx-icon-show>
                                    <span>
								<span>{{ prefixion(obj) }}</span>{{
                                            formattedData(totalList[obj.key], obj)
                                        }}<span>{{ postfix(obj) }}</span>
							</span>
                                </div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <div class="table-view-style-paging" v-if="stylesCommon.paging">
            <div class="table-view-style-paging-le">{{ tableI18n('inAll', '总共') }}{{
                    data.length
                }}{{ tableI18n('article', '条') }}
            </div>
            <div class="table-view-style-paging-ri">
                <div class="paging-le" @click="previous">
                    <rx-icon-show icon="icon-lineicon-test39"></rx-icon-show>
                </div>
                <div class="paging-button-select" @click="show =!show">
                    <div v-if="show" class="paging-button-select-la">
                        <div @click.stop="skip(i)" v-for="(i,index) in total" :key="index">{{ i }}</div>
                    </div>
                    <span>{{ pageNo }}</span>
                    <rx-icon-show icon="icon-lineicon-test40"></rx-icon-show>
                </div>
                <div class="paging-button-total">/{{ total }}</div>
                <div class="paging-le" @click="next">
                    <rx-icon-show icon="icon-lineicon-test41"></rx-icon-show>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ComponentView from "@/views/modules/preview/components/common/component-view.js";
import ScreenViewManageApi from "@/api/screen/core/screen-view-manage.js";
import aggregation from "@/views/modules/preview/components/js/aggregation.js";
import busEvent from "@/views/modules/preview/components/js/bus-event.js";


export default {
	name: "table-view",
	mixins: [ComponentView, aggregation, busEvent],
	data() {
		return {
			//表格所有数据
			data: [],
			dataList: [],//展示数据(分页后)
			columns: [],//列头
			roll: false,
			show: false,
			paging: false,
			total: 1,
			pageNo: 1,
			stylesCommon: {},
			advanced: {},
			totalList: {},
			iconList: [
				{
					icon: 'icon-linepingjunzhi',
					name: 'AVG',
				}, {
					icon: 'icon-linezuixiaozhi',
					name: 'MIN'
				}, {
					icon: 'icon-lineqiuhe',
					name: 'SUM'
				}, {
					icon: 'icon-linezuidazhi',
					name: 'MAX'
				}
			],
			mobile: false,
			params: {},
            /**
             * rowSpans:{
             *    "column1":[3,0,0,3,0,0]
             *    "column2":[2,0,1,2,0,1]
             *    "column3":[1,1,1,1,1,1]
             * }
             */
            rowSpans:[],
		}
	},
	mounted() {
		if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
			// 当前设备是移动设备
			this.mobile = true
		}
		this.stylesCommon = this.config.styles.stylesCommon;
		this.advanced = this.config.styles.advanced;
		this.paging = this.stylesCommon.paging;
		let set = this;
		this.$nextTick(function () {
			setTimeout(function f() {
				set.keyframesRoll()
			}, 500)
		})
	},
    created(){
        if(!this.config){
            return;
        }
        let mapping = this.config.advancedConf&& this.config.advancedConf.receive?this.config.advancedConf.receive.mapping:[];
        if(mapping && mapping.length>0 ){
            let params={};
            if (this.$route.meta.query) {
                params = JSON.parse(this.$route.meta.query);
            }else {
                params=this.$route.query;
            }
            //筛选器默认参数值
            let filterParams= this.getFilterParams();
            for (let i = 0; i < mapping.length; i++) {
                let value="";
                if(mapping[i].valueSource=='fixedVar'){
                    //固定参数
                    value = mapping[i].valueDef
                }else if(mapping[i].valueSource=='param'){
                    value = params[mapping[i].valueDef]?params[mapping[i].valueDef]:''
                }

                this.params[mapping[i].name]=value;
            }
        }
    },
	methods: {
		tableI18n(name, text, key) {
			return this.$ti18(name, text, "tableLang", key);
		},
		handReceive(args) {
			let receive = this.config.advancedConf.receive;
			if ((receive.type == 'event' && receive.publishComponent == args.component)) {
				let inputParams = args.params;
				let params = {};
				//读取配置的参数
				for (let i = 0; i < receive.mapping.length; i++) {
					let o = receive.mapping[i];
					if (o.valueSource == 'param' && inputParams[o.valueDef]) {
						params[o.name] = inputParams[o.valueDef];
					}
				}
				this.params = params;
				this.getData()
			}
		},
		mouseup() {
			this.keyframesRoll()
		},
		getData() {
			this.columns=[];
			this.data=[];
			//静态数据模式
			if(this.config.dataSources.source=="static") {
				if (this.config.dataSources.staticData) {
					//静态数据
					let staticData = JSON.parse(this.config.dataSources.staticData);
					this.columns=staticData.columns;
					this.data=staticData.data;
					this.reconsitutionLise();
				}
			}else {
				if (!this.config.dataSources.dimensions || this.config.dataSources.dimensions.length == 0) {
					return;
				}
				for (let i = 0; i < this.config.dataSources.dimensions.length; i++) {
                    let dimension = this.config.dataSources.dimensions[i];
                    let key=dimension.tableName ? dimension.tableName + '_' + dimension.fieldName : dimension.fieldName;
                    this.columns.push({
                        title: dimension.fieldLabel,
                        key: key,
                        ...this.getSetting(dimension)
                    })
				}
				let obj = {
					dataModel: this.config.dataSources.dataModel,
					measures: [],
					dimensions: this.config.dataSources.dimensions,
					colorLegends: [],
					resultNum: this.config.dataSources.resultNum,
					params: this.params,
					filterParams: []
				}
				let self = this;
				//获取数据
				ScreenViewManageApi.getData(JSON.stringify(obj)).then(res => {
                    self.data = res && res.data ? res.data : [];
                    self.reconsitutionLise();
				});
			}
		},
		//重构数据
		reconsitutionLise() {
			let pageSize = 0
			if (this.config.styles.stylesCommon.pageSize) {
				pageSize = this.config.styles.stylesCommon.pageSize
			} else {
				pageSize = 10
			}
			if (this.paging && this.data.length > pageSize) {
				//多页
				this.total = Math.ceil(this.data.length / pageSize);
				let list = [0, pageSize];
				if (this.total != 1) {
					this.dataList = []
					let start = (this.pageNo * pageSize) - pageSize;
					for (let i = 0; i < pageSize; i++) {
						if (this.data[start + i]) {
							this.dataList.push(this.data[start + i])
						}
					}

				}
			} else {
				this.dataList = [];
				//只有一页
				this.total = 1;
				this.pageNo = 1;
				this.dataList = this.data;
			}
			if (this.advanced.list) {
				this.totalList = {};
				this.advanced.list.filter(res => {
					let value = "";
					let list = [];
					if (res.page) {
						list = this.dataList;
					} else {
						list = this.data;
					}
					let label = res.statistics;
					switch (res.polymerization) {
						//求和
						case 'SUM':
							value = this.summation(list, res)
                            this.totalList[label]=value;
							break;
						//平均值
						case 'AVG':
							value = this.sumAvg(list, res)
							break;
						//最小
						case "MIN":
							value = this.sumMin(list, res)
							break;
						//最大
						case "MAX":
							value = this.sumMax(list, res)
							break;
						//自定义
						case "CUSTOM":
							value = this.customFormat(list, res)
							break;
					}
                    this.totalList[label]=value;
				})
			}
            this.parseRowSpans();
			let set = this;
			this.$nextTick(function () {
				setTimeout(function f() {
					set.keyframesRoll()
				}, 500)
			})
		},
		skip(index) {
			this.show = false;
			this.pageNo = index;
			this.reconsitutionLise()
		},
		//下一页
		next() {
			if (this.pageNo < this.total) {
				this.pageNo++;
				this.reconsitutionLise()
			}
		},
		//上一页
		previous() {
			if (this.pageNo > 1) {
				this.pageNo--;
				this.reconsitutionLise()
			}
		},
		backShowe(index) {
			if (index % 2 === 1) {
				return true
			} else {
				return false
			}
		},
		keyframesRoll() {
			let theadHeight = this.$refs.theadCommon.offsetHeight - 40;
			let tbodyHeinht = this.$refs.tbodyCommon.offsetHeight - theadHeight;
			if (this.config.styles.advanced.location != 'nome') {
				tbodyHeinht = tbodyHeinht + 40
			}
			if (tbodyHeinht > 0 && this.stylesCommon.roll) {
				let runkeyframes = `@keyframes rowup {0%{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0)} 100% {-webkit-transform: translate3d(0, -${tbodyHeinht}px, 0);transform: translate3d(0, -${tbodyHeinht}px, 0);display: none}}`;
				const style = document.createElement('style');
				style.innerHTML = runkeyframes;
				this.$refs.tableView.appendChild(style)
			} else {
				let runkeyframes = `@keyframes rowup {}`;
				const style = document.createElement('style');
				style.innerHTML = runkeyframes;
				this.$refs.tableView.appendChild(style)
			}
		},
		getStyle(stylesType, type, index) {
			let style = {}
			switch (type) {
				case 1:
					style = {
						'color': this.config.styles.stylesHead.fontColor,
						'font-size': this.config.styles.stylesHead.fontSize + 'px'
					}
					break;
				case 2:
					style = {
						'border': (stylesType.cutOffRuleShow ? '1px solid ' + stylesType.cutOffRuleColor : ''),
						'color': this.config.styles.stylesHead.fontColor,
						'font-size': this.config.styles.stylesHead.fontSize + 'px',
						'text-align': stylesType.listAligning
					}
					break;
				case 3:
					if (this.stylesCommon.roll) {
						style = {
							'animation': stylesType.speed + 's' + ' rowup linear infinite normal',
							'-webkit-animation': stylesType.speed + 's' + ' rowup linear infinite normal'
						}
					}
					break;
				case 4:
					style = {
						'border': (stylesType.cutOffRuleShow) ? '1px solid ' + stylesType.cutOffRuleColor : '',
						'background': (this.backShowe(index) && stylesType.listZebraShow ? stylesType.listZebraColor : '')
					}
					break;
				case 5:
					style = {
						'border': (stylesType.cutOffRuleShow ? '1px solid ' + stylesType.cutOffRuleColor : ''),
						'color': stylesType.fontColor,
						'font-size': stylesType.fontSize + 'px',
						'text-align': stylesType.listAligning
					}
					break;
			}
			return style
		},
		getStyleCommon(stylesType, index, item) {
			let style = {}
			style = {
				'border': (stylesType.cutOffRuleShow) ? '1px solid ' + stylesType.cutOffRuleColor : '',
				'background': (this.backShowe(index) && stylesType.listZebraShow ? stylesType.listZebraColor : '')
			}
			//警戒线的样式
			if (this.config.advancedConf.fullScreenShow && this.config.advancedConf.forewarningConfig) {
				this.config.advancedConf.forewarningConfig.filter(res => {
					if (this.figureJudgment(res, item)) {
                        style['background']=this.figureJudgment(res, item);
					}
				})
			}
			return style
		},
		getStyleCommonTd(stylesType, item, obj) {
			let style = {}
			style = {
				'border': (stylesType.cutOffRuleShow ? '1px solid ' + stylesType.cutOffRuleColor : ''),
				'color': stylesType.fontColor,
				'font-size': stylesType.fontSize + 'px',
				'text-align': stylesType.listAligning
			}
			//警戒线的样式
			if (!this.config.advancedConf.fullScreenShow && this.config.advancedConf.forewarningConfig) {
				this.config.advancedConf.forewarningConfig.filter(res => {
					if (this.figureJudgment(res, item) && obj.key == res.measure) {
                        style['background']= this.figureJudgment(res, item);
					}
				})
			}
			return style
		},
		figureJudgment(res, item) {
			let background = ''
			switch (res.range.type) {
				//等于
				case 'eq':
					if (item[res.measure] == res.range.figure) {
						background = res.background;
					}
					break;
				//大于
				case 'gt':
					if (item[res.measure] > res.range.figure) {
						background = res.background;
					}
					break;
				//大于等于
				case 'ge':
					if (item[res.measure] >= res.range.figure) {
						background = res.background;
					}
					break;
				//小于
				case 'lt':
					if (item[res.measure] < res.range.figure) {
						background = res.background;
					}
					break;
				//小于等于
				case 'le':
					if (item[res.measure] <= res.range.figure) {
						background = res.background;
					}
					break;
				//范围
				case 'in':
					if (res.range.greaterThan <= item[res.measure] && item[res.measure] <= res.range.lessThan) {
						background = res.background;
					}
					break;

			}
			return background
		},
		//前缀
		prefixion(obj) {
			return this.dataFilter(obj, 'prefix')
		},
		//加后缀
		postfix(obj) {
			return this.dataFilter(obj, 'suffix')
		},
		//图标
		psIconfont(obj) {
			return this.dataFilter(obj, '');
		},
		dataFilter(obj, type) {
			if (this.config.styles && this.config.styles.advanced && this.config.styles.advanced.list) {
				let list = this.config.styles.advanced.list;
				let name = '';
				let fieldName = obj.key;
				list.filter(res => {
					if (fieldName == res.statistics) {
						if (type) {
							name = res.format[type]
						} else {
							name = res.format
						}
					}
				})
				return name
			}
		},
		myIcon(obj) {
			let list = this.config.styles.advanced.list;
			let fieldName = obj.key;
			let configuration = {};
			let name = '';
			list.filter(res => {
				if (fieldName == res.statistics) {
					configuration = res;
				}
			})
			this.iconList.filter(res => {
				if (res.name == configuration.polymerization) {
					name = res.icon
				}
			})
			return name
		},
		//格式化数据
		formattedData(value, obj) {
			//获取配置
			let configuration = {};
			let list = this.config.styles.advanced.list;
			let fieldName = obj.key;
			list.filter(res => {
				if (fieldName == res.statistics) {
					configuration = res.format;
				}
			})
			//先判断是否需要处理小数位
			if (configuration.decimals != 'none' && configuration.dataFormat != 'percentage') {
				value = this.toFixed(value, configuration.decimals);
			}
			if (configuration.dataFormat && configuration.dataFormat == 'thousands') {
				//千分位
				let arr = JSON.stringify(value).split('.');
				let intPart = arr[0].replace(/\B(?=(\d{3})+$)/g, ',');
				let decPart = (arr[1] ? '.' + arr[1] : '');
				value =  intPart + decPart;

			} else if (configuration.dataFormat && configuration.dataFormat == 'percentage') {
				//百分比
				if(configuration.decimals == 'none'){
					value = (value * 100) + '%';
				}else {
					value = this.toFixed((value * 100), configuration.decimals) + '%';
				}
			} else if (configuration.dataFormat && configuration.dataFormat == 'trillion') {
				//转千万亿
				value = this.thousands(value);
			}
			return value;
		},
		//转千万亿
		thousands(value) {
			let newValue = 0;
			if (value >= 100000000) {
				newValue = value / 100000000 + this.tableI18n('hundredMillion', '亿');
			} else if (value >= 10000000) {
				newValue = value / 10000000 + this.tableI18n('tenMillion', '千万');
			} else if (value >= 1000000) {
				newValue = value / 1000000 + this.tableI18n('million', '百万');
			} else if (value >= 10000) {
				newValue = value / 10000 + this.tableI18n('wan', '万');
			} else if (value >= 1000) {
				newValue = value / 1000 + this.tableI18n('thousand', '千');
			} else {
				newValue = value;
			}
			return newValue;
		},
		//保留小数
		toFixed(value, type) {
			switch (type) {
				case 'roundNumbers':
					value = Math.floor(value * 1) / 1;
					break;
				case 'oneDecimals':
					value =this.zeroFill(Math.floor(value * 10) / 10,1);

					break;
				case 'twoDecimals':
					value = this.zeroFill(Math.floor(value * 100) / 100,2);
					break;
				case 'threeDecimals':
					value =  this.zeroFill(Math.floor(value * 1000) / 1000,3)
					break;
			}
			return value
		},
		zeroFill(value,num){
			var s = value.toString();
			var rs = s.indexOf('.');
			if (rs < 0) {
				rs = s.length;
				s += '.';
			}
			while (s.length <= rs + num) {
				s += '0';
			}
			return s
		},
		//数据联动发出事件；
		tablePush(obj){
			let self = this;
			//是否开启联动
			if(self.config.advancedConf.linkage){
				let publishParams={
					component:self.config.key,
				};
				if(self.config.advancedConf.publish && self.config.advancedConf.publish.paramMapping.length>0){
					let params = {};
					let paramMapping=self.config.advancedConf.publish.paramMapping;
					for (let i = 0; i <paramMapping.length ; i++) {
						let value="";
						let key = (paramMapping[i].key).replace(".","_");
						value =obj[key];
                        params[paramMapping[i].key]=value;
					}
					publishParams.params = params
				}
				self.$bus.emit('chartEvent',publishParams);
			}
		},
        parseRowSpans() {
            this.columns.forEach((column, columnIndex) => {
                let field = column.key;
                //初始化纵向合并集合
                if (!this.rowSpans[field] || this.rowSpans.length != this.dataList.length) {
                    let ary = [];
                    this.dataList.forEach(() => {
                        ary.push(1);
                    });
                    this.rowSpans[field] = ary;
                }
                //数组开始下标
                let startIndex = 0;
                //记录当前合并数
                let curRowSpan = 0;
                //计算纵向合并
                this.dataList.forEach((row, rowIndex) => {
                    let curRowIndex = rowIndex;
                    let dataList = this.dataList;
                    //不是第一列的情况，则判断前一列的合并数
                    if (columnIndex > 0) {
                        let preField = this.columns[columnIndex - 1].key;
                        let preRowSpan = this.rowSpans[preField][rowIndex];
                        if (preRowSpan > 0) {
                            if (rowIndex == curRowSpan) {
                                startIndex = curRowSpan;
                            }
                            curRowIndex -= startIndex;
                            curRowSpan += preRowSpan;
                            //计算父级合并数
                            dataList = dataList.slice(startIndex, startIndex + preRowSpan);
                        } else {
                            curRowIndex -= startIndex;
                            preRowSpan = curRowSpan;
                            //计算父级合并数
                            dataList = dataList.slice(startIndex, preRowSpan);
                        }
                    }
                    let rowSpan = this.getRowSpan(column, dataList, curRowIndex);
                    this.rowSpans[field][rowIndex] = rowSpan;
                })
            })
        },
        getStyleWidth(type){
            let styleObj = {
                width: 100 / type + '%',
                border: '1px solid rgba(66, 133, 244, 0.7)'
            }
            return styleObj
        },
        getRowSpan(column, dataList, index) {
            var rowSpan = 1;
            if (typeof column.rowSpan != 'boolean' || !column.rowSpan) {
                return rowSpan;
            }
            let row = dataList[index];
            let field = column.key;
            if (row[field]) {
                if ((index - 1) >= 0 && dataList[index - 1][field] == row[field]) {
                    //被合并
                    return 0;
                }
                for (var i = 0; i < dataList.length; i++) {
                    if (i > index) {
                        if (dataList[i][field] == row[field]) {
                            rowSpan += 1;
                        } else {
                            break;
                        }
                    }
                }
            }
            return rowSpan;
        },
        StyleWidth(type) {
            let styleObj = {
                width: 100 / type + '%',
            }
            return styleObj
        },
        getSetting(dimension) {
            if (dimension.setting) {
                let setting = JSON.parse(dimension.setting);
                return {
                    //是否纵向合并
                    rowSpan: setting.rowSpan
                }
            }
            return {};
        },
	},
	watch: {
		config: {
			handler(o, _o) {
				this.roll = this.stylesCommon.roll;
				this.paging = this.stylesCommon.paging;
			},
			deep: true
		},
		roll() {
			let set = this;
			setTimeout(function f() {
				set.keyframesRoll()
			}, 500)
		},
		paging() {
			this.reconsitutionLise()
		},
	}
}
</script>

<style scoped>
.table-view-roll {
    position: absolute;
}
.rx-center{
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
}
.rx-table-center {
    flex: 1;
    overflow: auto;
}

.rx-table-center::-webkit-scrollbar {
    display: none !important;
}

.borderNome-thead {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.rx-card-item-table-common-thead {
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.tbody-common-div {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.paging-button-select-la::-webkit-scrollbar {
    display: none !important;
}

.paging-button-select-la {
    position: absolute;
    bottom: 2.5rem;
    max-height: 10rem;
    left: 0;
    right: 0;
    background: rgba(66, 133, 244, 0.3);
    box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 0.28);
    border-radius: 3px;
    color: white;
    overflow: scroll;
    z-index: 9999;
}

.paging-button-select {
    padding: 0px 10px;
    height: 30px;
    background: rgba(66, 133, 244, 0.3);
    box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 0.28);
    border-radius: 3px;
    text-align: center;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0px 10px;
    position: relative;
}

.paging-button-total {
    height: 30px;
    line-height: 30px;
    margin-right: 10px;

}

.paging-le {
    width: 30px;
    height: 30px;
    background: rgba(66, 133, 244, 0.3);
    box-shadow: 0px 0px 4px 0px rgba(170, 170, 170, 0.28);
    border-radius: 3px;
    text-align: center;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paging-le i {
    font-size: 25px;
    color: white;
}

.table-view-style-paging-ri {
    display: flex;
    margin-right: 30px;
    color: white;
    margin-top: 10px;
}

.table-view-style-common-roll {
    flex: 1;
    position: relative;
}

.table-view-style-paging-le {
    line-height: 40px;
    font-size: 14px;
    color: white;
    flex: 1;
    margin-left: 10px;
}

.table-view-style {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.table-view-style-common {
    overflow: auto;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.table-view-style-paging {
    height: 40px;
    display: flex;
    margin: 5px 0px;
    cursor: pointer;
}


.rx-card-item-table-roll {
    position: relative;
    overflow: hidden !important;
}


.table-view-tbody::-webkit-scrollbar {
    display: none !important;
}

.table-view-tbody {
    overflow-y: auto;
}

.thead-tr {
    color: white;
}

table {
    border-collapse: collapse;
}

.rx-card-item-table {
    table-layout: fixed;
    max-height: 100%;
    width: 100%;
}

.rx-card-item-table tr {
    text-align: center;
}

.rx-card-item-table tr th {
    padding: 4px 0px;
    word-wrap: break-word;
}

.thead-tr td {
    padding: 4px 0px;
    word-wrap: break-word;

}


.rx-card-item-table-left {
    width: 2rem;
    position: sticky;
    left: 0px;
    padding: 0px 5px;
    z-index: 999;

}

.rx-card-item-table tr td {
    padding: 2px 0px;
    word-wrap: break-word;
}

.rx-card-item-table-flex {
    flex: 1;
    overflow: hidden;
}

.rx-card-item-table-common {
    padding: 0px 10px;
    line-height: 35px;
    min-height: 35px;
}

.borderNome {
    border-top: none !important;
    border-bottom: none !important;
}

.table-common-0 >>> .rx-card-item-table-common {
    overflow: hidden;
    word-break: break-all;
}

.table-common-1 >>> .rx-card-item-table-common {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.table-common-2 >>> .rx-card-item-table-common {
    overflow: hidden;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}
</style>
